<template>
  <div class="Test" v-if="books.length">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>书籍名称</th>
          <th>出版日期</th>
          <th>购买价格</th>
          <th>购买数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in books">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.data}}</td>
          <td>{{item.price }}</td>
          <!-- | showPrice -->
          <td>
            <button @click="dec(index)" v-bind:disabled="item.count<=1">-</button>
            {{item.count}}
            <button @click="add(index)">+</button>
          </td>
          <td>
            <button @click="removeH(index)">移除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h2>总价格：{{ totalP}}</h2>
  </div>
  <h1 v-else>购物车无物品</h1>
</template>




<script>
import { log } from "util";
export default {
  data() {
    return {
      books: [
        {
          id: 1,
          name: "《算法基础》",
          data: "2010-6",
          price: "50.00",
          count: 1
        },
        {
          id: 2,
          name: "《Linux编程》",
          data: "2010-2",
          price: "58.00",
          count: 1
        },
        {
          id: 3,
          name: "《程序人生》",
          data: "2013-6",
          price: "88.00",
          count: 1
        },
        {
          id: 4,
          name: "《Java面向对象》",
          data: "2013-12",
          price: "55.00",
          count: 1
        }
      ]
    };
  },
  methods: {
    add(index) {
      this.books[index].count++;
    },
    dec(index) {
      this.books[index].count--;
    },
    removeH(index) {
      this.books.splice(index, 1);
    }
  },
  computed: {
    totalP() {
      let totalPrice = 0;
      for (let i = 0; i < this.books.length; i++) {
        totalPrice += this.books[i].price * this.books[i].count;
      }
      return totalPrice;
    }
  }
}
</script>

<style scoped>
table {
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}

th {
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}
</style>

